<!--  -->
<template>
<div id='Commodity' v-if="isRouterAlive" class="root">
        <div class="hint">
      <div class="header">
          <h3></h3>
          <el-button  icon="el-icon-refresh" class="f5" @click="haodledoc">刷新</el-button>
      </div>
       <div class="search">
         <div class="search-header"></div>
         <div class="search-bottom"><span>品牌名称：</span>
           
                 <div class="sele" >
                   <i class="el-icon-arrow-down"></i> 
             {{haodletext}}
             <ul>
                     <li @click="haodlelist($event)" v-for="menulist1 in menulist" :key="menulist1.id">{{menulist1.name}}</li>  
            </ul>
                 </div>
                 <el-button type="primary" icon="el-icon-search">查询</el-button>
             </div>
     </div>
    
     <div class="detailedlist">
         <div class="detailedlist-header">
             <h3>共有记录<span>{{total}}</span>条</h3>
             <el-button type="primary" icon="el-icon-plus" @click="dell">添加菜系</el-button>
         </div>
         <div class="detailedlist-main">
             <div class="detailedlist-main-hd">
                 <div>序号</div>
                 <div>商品分类名称</div>
                 <div>上级分类</div>
                 <div>商品分类描述</div>
                 <div>操作</div>
              
                 </div>
                <div class="detailedlist-main-bd" v-for="(list,index) in schArr" :key="list.id">
                    <div>{{list.id}}</div>
                 <div>{{list.name}}</div>
                 <div>{{list.default}}</div>
                 <div>{{list.brand}}</div>
           
     
                 <div>
  <el-link type="primary" class="el-icon-edit" @click="dell">编辑</el-link>&nbsp;&nbsp;
  <el-link type="primary" class="el-icon-close" @click="remove(index)">删除</el-link></div>
               
                </div>
         </div>
         <el-pagination
              background
              :page-sizes="[5, 10, 15, 20]"
              layout="prev, pager, next,sizes"
              :page-size.sync="pagesize"
              :current-page="pagenum"
              @current-change="changetotal"   
               @size-change="handleSizeChange" 
              :total="total" >                   <!--页码改变时执行的事件-->
                     </el-pagination>
     </div>
    </div>
<div class="model" v-show="del">
     <div class="modality">
         <div class="modality-hd"><h3>分区新增</h3><p>此处分区设置管理员并保存后，管理员员工账号将自动分配分区中的外卖店铺的管理权限</p></div>
         <div class="modality-bd">



<el-form  :model="form" label-width="80px" :rules="rules">
  <el-form-item label="分区名称" prop="name">
    <el-input v-model="form.name" placeholder="请输入分区名称（必填）"></el-input>
  </el-form-item>
  
  
  <el-form-item label="联系人" prop="lian">
    <el-input v-model="form.lian" placeholder="请输入联系人"></el-input>
  </el-form-item>
  <el-form-item label="手机号" prop="iphome">
    <el-input v-model="form.iphome" placeholder="请输入手机号"></el-input>
  </el-form-item>

  <el-form-item label="店铺地址" >
    <el-input v-model="form.user" placeholder="选择省"  class="shen" disabled=true></el-input>
    <el-input v-model="form.user1" placeholder="选择市" class="shen" disabled=true></el-input>
    <el-input v-model="form.user2" placeholder="选择区" class="shen" ></el-input>
  </el-form-item> 
  <el-form-item label="特殊资源" prop="resource">
    <el-radio-group v-model="form.arios">
      <el-radio label="上面所选的行政区的全部区域（全省、全市、全区、全县）"></el-radio>
      <el-radio label="在地图上点击区域"></el-radio>
    </el-radio-group>
  </el-form-item>
  <div class="img">
      <img src="@/assets/titu.png">
    <div  v-for="(list,index) in dian" :key="index" @click="dianji(list.u,list.u2,list.u3)" :class="[{dian:index===0},{diana:index===1},{dianb:index===2},{dianc:index===3},{diand:index===4},{diane:index===5},]">
      <div class="det">{{list.name}}</div>
      <div class="dian1"></div>
      <div class="dian2"></div>
      <div class="dian3"></div>
      <div class="dian4"></div>
      </div> 
  </div>
   <el-form-item class="button"><el-button type="primary" @click="submit(),dell()">确定</el-button>
    <el-button @click="dell">取消</el-button></el-form-item>
  
</el-form> 

         </div>
         <i class="el-icon-close" @click="dell"></i>  </div>
</div>



</div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';


export default {
//import引入的组件需要注入到对象中才能使用
components: {

},
data() {
//这里存放数据
return {
    tem:[],
  dian:[
      {name:"广州",u:"广东省",u2:"广州市",u3:"荔湾区"}
  , {name:"南昌",u:"江西省",u2:"南昌市",u3:"青云谱区"}
  ,{name:"昆明",u:"云南省",u2:"昆明市",u3:"盘龙区"}
  ,{name:"武汉",u:"湖北省",u2:"武汉市",u3:"洪山区"}
  ,{name:"贵阳",u:"贵州省",u2:"贵州市",u3:"白云区"}
  ,{name:"杭州",u:"浙江省",u2:"杭州市",u3:"西湖区"}],
  nn:0,
    form: {
          name: '',
          lian: '',
          iphome: '',
          user: '',
          user1: "",
          user2: '',
          region:"",
          arios:''
        },
        rules:{
         
                name:[
                    { required:true,message:'输入用户有误',trigger:"blur"}
                ],
                 lian:[
                     {required:true,message:'输入用户有误',trigger:"blur"}
                 ],
                 iphome:[
                     {required:true,message:'输入用户有误',trigger:"blur"}
                 ],
                 user:[
                     {required:true,message:'输入用户有误',trigger:"blur"}
                 ],
        },
 pagesize:10,
    total:0,                //数据条数
           //每页显示多少条
    pagenum:1,            //当前所在页数
       isRouterAlive:true,
       haodletext:"所有菜",
       schArr:[],        
       menulist:[
           {
               id:1,
               name:"酸菜",
           },
           {
               id:2,
               name:"白菜"
           }
       ],
       listdata:[],
      num:1000,
       del:true,
       obj:{}
};
},
//监听属性 类似于data概念
computed: {
       

    
},
//监控data中的数据变化
    
watch: { 
    
        },
//方法集合
methods: {
    screen:function(){
        
         this.listdata= this.tem.filter(val=>{
           if(val.brand==="酸菜"){
               return true;
           }
         }) 
   
         this.getPageData();

    },
    screen1:function(){
        
         this.listdata = this.tem.filter(val=>{
           if(val.brand==="白菜"){
               return true;
           }
         }) 
   
         this.getPageData();

    },
    screen2:function(){
        
         this.listdata = this.tem.filter(val=>{
        
               return true;
           
         }) 
   
         this.getPageData();

    },
    dianji:function(u,u1,u2){
        this.form.user = u
        this.form.user1 = u1
        this.form.user2 = u2
    },
    submit(){
        let  obj ={
           id :1,
 name:this.form.name,
default:this.form.user1+this.form.user2,
brand:"酸菜",
uresname :this.form.lian,
phone:this.form.iphome,
        }

    
   
  console.log(this.schArr)
    this.listdata.map(res=>++res.id)
   this.listdata.unshift(obj);
   this.tem =this.listdata
         this.getPageData();

this.form.name=""
this.form.user1=""
this.form.user2=""
this.form.lian=""
this.form.iphome=""



    },
    handleSizeChange(newvalue){
        this.pagesize = newvalue
         this. getPageData();

    },
    getPageData() {
   	  let start = (this.pagenum - 1) * this.pagesize;
      let end = start + this.pagesize;
      this.schArr = this.listdata.slice(start, end);
      this.total=this.listdata.length
    },
    changetotal:function(newvalue){
         this.pagenum=newvalue
         this. getPageData();
    },
   haodledoc:function(){
     this.isRouterAlive = false;
 setInterval(() => {
       this.isRouterAlive =true;
 }, 1000);
 
   },
   haodlelist:function(e){
    
       this.haodletext=e.target.innerText
      if(e.target.innerText=="酸菜"){
          this.screen();
      } else if(e.target.innerText=="白菜"){
          this.screen1();
      }
       else{
           this.screen2();
       }
       
   },
   remove:function(index){
      this.schArr.splice(index,1);
   },
   changehttp: function(){

 this.$http.get("http://rap2api.taobao.org/app/mock/276463/pp").then(res=>{
 this.listdata=res.data.data
 this.total=res.data.data.length
 this.tem = this.listdata
 this.getPageData();
console.log(this.listdata)
})

   },
   dell:function(){
       this.del=!this.del
   }
},
//生命周期 - 创建完成（可以访问当前this实例）
created() { 
         this.changehttp()
},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {
    
},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {  }, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang="less" scoped>
.root{
    position:relative;
    ul,li{
        margin:0;
        padding:0;
        list-style: none;
    }
    height:100%;
    background:#f5f5f5;
    .hint{ width:100%;
        height:45px;
       margin-bottom:30px;
        background:#fff;

    .header{
        margin:0 auto;
        padding:0 5px;
        width:1400px;
        height:45px;
        background:#fff;
        color:#999999;
        display: flex;
        justify-content: space-between;
        align-content: center;
        position: relative;
        .f5{
            position: absolute;
            right:20px;
        }

    }
    .search{
    
        height:120px;
       width: 1400px;
       margin:30px auto 0;
       border:1px solid #e9e9e9;
       margin-bottom:10px;
       .search-header{
           border-bottom:1px solid #e9e9e9;
           height:50px;
           background:#fff;
           box-sizing:border-box;
           padding:0 30px;
       }
         .search-bottom{
             height:70px;
           background:#fff;  box-sizing:border-box;
           padding:0 50px;
           display: flex;
           justify-content: flex-start;
           align-items: center;
           span{
               font-size: 12px;
               
           }
           .sele{
               margin-right:10px;
               box-sizing: border-box;
               width:150px;
               height:35px;
               position: relative;
               line-height: 35px;
               padding-left:20px;

                border:1px solid #999;
                   i{
                       position: absolute;
                       right: 8px;
                       width:16px;
                       height:16px;
                       font-size: 16px;
                       top:10px;
                       transition: all 1s;

                   }
                   &:hover ul{
                       display: block;

                   }
                   &:hover i{
                       transform: rotate(180deg);
                   }
               ul{
                   position: absolute;
                   width:150px;
                   border:1px solid #999;
                   border-top:0;
                   top:35px;
                       left:0;
                       display: none;

                   li{
                       height:34px;
                       line-height: 34px;
                       text-align: center;
                      
                       border-bottom:1px solid #999;
                   }
               }
           }
         }
    }
    
    .detailedlist{
        width:1400px;
        margin:0 auto;
        background:#fff;
        box-sizing: border-box;
        padding:0 10px;
        .detailedlist-header{
            height:64px;
            display: flex;
            justify-content: space-between;
              align-items: center;
              font-weight: 800;
        }
        .detailedlist-main{
            line-height: 45px;
            border:1px solid #ccc;
            .detailedlist-main-hd{
            height:45px;
                display: flex;
             background:#f5f5f5;
             div{
                    flex: 1;
                    text-align: center;
                    border: 1px solid #ccc;
                }
            }
            .detailedlist-main-bd{
                height:45px;
                display: flex;
                div{
                    border: 1px solid #ccc;
                    text-align: center;
                    flex: 1;
                }
            }
        }
    }
}
.model{
    position:fixed;
    left:0;
    right:0;
    top:0;
    bottom:0;
    z-index:9999;
    background:rgba(0,0,0,0.5);
    .modality{
    height:800px;
    width:1100px;
    box-sizing:border-box;
 
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    background:#fff;
    .modality-hd{
        width:100%;
        height:70px;
        background:#f2f2f2;
        text-indent:2em;
    }
    .modality-bd{
        height:730px;
           padding:0 20px;
    }
    i{
        position:absolute;
        right:0;
        top:0;
        width:30px;
        height:30px;
        font-size:30px;
        cursor: pointer;
    }
}
}
.shen{
    width:100px;
    margin-right:10px;
}
.img{
     width:900px;
      height:350px;
          margin:0 auto;
          position: relative;
      
      img{
          width:100%;
          height:100%;
      }
      
}
 .button{
       
         width:100%;
        text-align: right;
     }
.det{
    position:absolute;
    left:0;
    top:-40px;
    width:60px;
   text-align:center;
   left:-30px;
    background:#fff;
            transition: 1s;
        transform: scale(0);

}
        .dian {
            background:green;
            border-radius: 50%;
            position: absolute;
            left: 500px;
            top: 310px;
             width: 10px;
            height: 10px;
            cursor: pointer;
        }
        .dian:hover .det,.diana:hover .det,.dianb:hover .det,.dianc:hover .det,.diand:hover .det,.diane:hover .det{
        transform: scale(2);
        }
       
        .diana{
              background:green;
            border-radius: 50%;
            position: absolute;
            left: 605px;
            top: 130px;
             width: 10px;
            height: 10px;
            cursor: pointer;
            
        }
        .dianb{
              background:green;
            border-radius: 50%;
            position: absolute;
            left: 90px;
            top: 250px;
             width: 10px;
            height: 10px;
            cursor: pointer;

        }
        .dianc{
              background:green;
            border-radius: 50%;
            position: absolute;
            left: 540px;
            top: 70px;
             width: 10px;
            height: 10px;
            cursor: pointer;

        }
        .diand{
              background:green;
            border-radius: 50%;
            position: absolute;
            left: 240px;
            top: 200px;
             width: 10px;
            height: 10px;
            cursor: pointer;

        }
        .diane{
              background:green;
            border-radius: 50%;
            position: absolute;
            left: 770px;
            top: 82px;
             width: 10px;
            height: 10px;
            cursor: pointer;

        }
        .dian1,
        .dian2,
        .dian3,
        .dian4 {
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            margin: auto;
            border: 1px solid green;
            border-radius: 50%;
        }
        
        .dian1 {
    
            animation: da 1s infinite linear;
         
        }
        
        .dian2 {
            animation: da 1.5s infinite linear;
       
        }
        
        .dian3 {
            animation: da 2s infinite linear;
        }
        
        .dian4 {
            animation: da 2.5s infinite linear;
            
        }
        
        @keyframes da {
            0% {
                opacity: 1;
                transform: scale(1)
            }
            25% {
            opacity: 0.7;
                transform: scale(1.4)
                
            }
            50% {
                opacity: 0.7;
                transform: scale(1.8)
            }
            75% {
                opacity: 0.4;
                transform: scale(2.2)
            }
            100% {
                opacity: 0.1;
                transform: scale(2.6)
            }
        }
}

    
</style>